import * as echarts from 'echarts';
import { useEffect ,useRef ,useState} from "react";

const Tjt = () => {
    const chartRef = useRef(null);
    const [chartInstance, setChartInstance] = useState(null);
  
    useEffect(() => {
      if (!chartInstance) {
        // 使用ref获取echarts图表容器
        const instance = echarts.init(chartRef.current);
        setChartInstance(instance);
      }
  
      return () => {
        if (chartInstance) {
          // 在组件销毁时销毁echarts实例
          chartInstance.dispose();
        }
      };
    }, [chartInstance]);
  
    useEffect(() => {
      if (chartInstance) {
        // 定义echarts的配置项
        const option = {
          xAxis: {
            type: 'category',
            axisLabel: {
              color: 'white' // 将 x 轴上的标签内容设置为白色
            },
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            name: '震级',
            nameTextStyle: {color: 'white' },
            type: 'value',
            axisLabel: {color: 'white' }
          },
          series: [
            {
              data: [1, 3, 4.5, 2,5,2,4],
              type: 'bar',
              backgroundStyle: {
                color: 'blue'
              }
            }
          ]
        };
  
        // 设置echarts的配置项
        chartInstance.setOption(option);
      }
    }, [chartInstance]);
  
    return <div ref={chartRef} style={{ 
      width: '80%', 
      height: '80%',
      marginLeft:10
    }}></div>;
  };
  
  export default Tjt;